<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{border:solid 10px black;}
    </style>
</head>
<body>
    <div class="box" style="width:100px;height:100px;background:red">hello</div>
</body>
<script>

    var obox = document.querySelector(".box");

    // console.log(obox)

    // // 行内样式操作
    // console.log(obox.style)
    
    // // 获取样式
    // console.log(obox.style.width)
    // console.log(obox.style.height)
    // console.log(obox.style.background)
    // console.log(obox.style.color)

    // // 使用获取行内样式的操作，获取非行内样式：无法获取
    // console.log(obox.style.border)

    // 逐一设置css样式
    // obox.style.width = "200px";

    // 批量设置css样式，注意会覆盖原有样式
    // obox.style.cssText = "height:300px;font-size:30px;color:yellow"

    
    // 非行内样式
    // console.log(getComputedStyle(obox))
    
    // // 获取
    // console.log(getComputedStyle(obox).border)
    
    // // 切记，非行内样式，只能获取，不能设置
    // // getComputedStyle(obox).border = "solid 30px yellow";
    
    // // 使用获取非行内样式的操作，获取行内样式：OK
    // console.log(getComputedStyle(obox).width)
    // console.log(getComputedStyle(obox).height)
    // console.log(getComputedStyle(obox).background)


    // IE浏览器专用方式
    // console.log(obox.currentStyle);
    // console.log(obox.currentStyle.border);


    console.log(getStyle(obox,"width"))
    console.log(getStyle(obox,"height"))
    console.log(getStyle(obox,"border"))
    console.log(getStyle(obox,"background"))

    // 获取样式的兼容封装
    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele)[attr]
        }
    }
</script>
</html>